<#escape x as x?html>
<!DOCTYPE html>
<html>
    <@y.htmlHead type="login"></@>
<body>
<div class="main">
    <!--header-->
    <div class="row" style="margin: 5px;">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-3 col-lg-2"><img src="${assetsPath}/img/demo/logo.png"/></div>
        <div class="col-md-4 col-lg-3" style="padding-top: 10px;">
            <div class="btn-group" style="float: left;color: #999999;min-width: 150px;">
                <select id="roleSelect" class="form-control select2"
                        data-url="${contextPath}/sys/applicationCategory/rest/findAll"
                        data-value="${(record.categoryId)!}"
                        data-key="id"
                        name="categoryId" data-placeholder="搜索应用">
                </select>
            </div>
            <div class="input-group">
                <input type="text" id="appSearch" class="form-control"
                       style="background-color:white;border-left: none;border-right: none;"/>
                <span class="input-group-addon"
                      style="background-color: #49A6DB;cursor:pointer;"
                      id="searchBtn">
                    <i class="glyphicon glyphicon-search" style="color:white;"></i></span>
            </div>
        </div>
        <div class="col-md-5 col-lg-5" style="padding-top: 10px;">
            <#if isLogin>
                <div class="pull-right" style="margin-top: 5px;">
                    <span style="color: #337AC4;margin-right: 10px;">${userName!''}</span>
                    <button type="button" class="btn btn-link  pull-right"
                            style="outline: none;font-size: 14px;color: black;margin-top: -7px;"
                            onclick="window.location.href='/logout'">
                        登出
                    </button>
                </div>
            <#else>
                <button type="button" class="btn btn-link pull-right"
                        style="outline: none;font-size: 14px;color: black;padding-right: 0px;"
                        onclick="window.location.href='/login'">登录
                </button>
            </#if>
        </div>
        <div class="col-md-0 col-lg-1"></div>
    </div>
    <!--第二行tab选项卡-->
    <div class="row" style="margin: 5px;background-color: #466eb7">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-6 col-lg-4">
            <ul class="nav navbar-nav" style="margin-left: -5px;">
                <li>
                    <a href="/app" style="color:white;font-size: 18px;">首页</a>
                </li>
                <li style="background-color: #49A6DB">
                    <a href="/myApp/index" style="color:white;font-size: 18px;">我的应用</a>
                </li>
                <li style="<#if !isLogin>display:none</#if>">
                    <a href="/myApp/favoriteIndex" style="color:white;font-size: 18px;">我的收藏</a>
                </li>
            </ul>
        </div>
        <div class="col-md-6 col-lg-7"></div>
    </div>
    <!--应用分类-->
    <div class="row" style="margin: 5px;">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-3 col-lg-2">
            <table class="table" style="margin-bottom: 10px;">
                <thead>
                <p style="margin-left: 10px;font-size: 16px;font-weight:bold;margin-top: 20px;">应用推荐</p>
                <hr color="blue" width="100%"
                    style="border-top: 2px solid;color: #dadada;margin-top: 10px;margin-bottom: 0px;"/>
                </thead>
            </table>
            <ul class="users-list clearfix hot">
                <#if (recommendApps??)&&(recommendApps?size>0)>
                    <#list recommendApps as recommendApp>
                        <li style="width: 100%;padding:0px;" appId="${recommendApp.id!''}">
                            <div class="info-box"
                                 style="background-color: transparent;box-shadow: none;margin-bottom: 0px;">
                        <span class="info-box-icon" style="background-color: transparent;"><img
                                src="/resource/app/${recommendApp.pic!''}" style="margin-top: -10px;border-radius: 0;"
                                alt="User Image"></span>
                                <div class="info-box-content" style="padding-top: 12px;">
                                    <span class="info-box-text"
                                          style="font-weight:bold;text-align: left;">${recommendApp.name!''}</span>
                                    <span class="info-box-text"
                                          style="font-size: 12px;color:#999999;text-align: left;margin-top: 32px;"><i
                                            class="fa fa-rss text-primary" reset
                                            title="订阅"></i>&nbsp;${recommendApp.subscribeCount!''}次订阅</span>
                                </div>
                            </div>
                        </li>
                    </#list></#if>
            </ul>
            <table class="table">
                <thead>
                <p style="margin-left: 10px;font-size: 16px;font-weight:bold;margin-top: 20px;">应用排行</p>
                <hr color="blue" width="100%"
                    style="border-top: 2px solid;color: #dadada;margin-top: 10px;margin-bottom: 0px;"/>
                </thead>
                <tbody>
                    <#if (top10??)&&(top10?size>0)>
                        <#list top10 as app>
                        <tr id="${app.id!''}" class="sumary">
                            <td style="padding-left: 10px;width: 10px;border: 0px none;<#if app_index<3>color: #eb853a;</#if> padding-bottom: 0px;font-size: 16px;">
                            ${app_index+1}
                            </td>
                            <td style="border-top: none;padding-bottom: 0px;font-size: 16px;<#if app_index<3>color: #eb853a;</#if>">${app.name!''}</td>
                        </tr>
                        <tr id="${app.id!''}_detail" style="display: none">
                            <td style="padding-left: 10px;width: 10px;border: 0px none;"></td>
                            <td style="border: 0px none;"><img src="/resource/app/${app.pic!''}"
                                                               style="margin-top: 5px;border-radius: 0;margin-right: 20px;float: left;"
                                                               alt="User Image">
                                <p style="font-weight: bold;line-height: 20px;margin: 2px;">${app.name!''}</p>
                                <p style="line-height: 20px;margin-top: 8px;margin-bottom: 0px;"><i
                                        class="fa fa-rss text-primary" reset
                                        title="订阅"></i>&nbsp;${app.subscribeCount!''}次订阅
                                </p>
                                <input class="rating-input-small" value="${app.star!''}" type="number">
                            </td>
                        </tr>
                        </#list>
                    </#if>
                </tbody>
            </table>
        </div>
        <div class="col-md-9 col-lg-8">
            <div class="btn-group row" style="margin:20px;margin-left: 0px;margin-bottom: 5px;width: 100%;margin-top: 40px;">
                <div class="col-md-1 col-lg-1" style="padding-left: 0px;padding-right: 0px;">
                    <span class="pull-left" style="margin-top: 20px;">标签：</span>
                </div>
                <div class="col-md-11 col-lg-11" style="padding-left: 0px;">
                    <button type="button" class="btn btn-default tag"
                            style="outline: none;margin: 10px;width: 115px;height: 45px;border-radius: 25px;font-size: 14px;margin-left:0px;"
                            id="allTags" _select="true">全部
                    </button>
                    <#if (tags??)&&(tags?size>0)>
                        <#list tags as tag>
                            <button type="button" class="btn btn-default tag"
                                    style="outline: none;margin: 10px;width: 115px;height: 45px;border-radius: 25px;font-size: 14px;margin-left:0px;"
                                    id="${tag.id!''}">${tag.name!''}
                            </button>
                        </#list>
                    </#if>
                </div>
            </div>
            <hr color="blue" width="100%"
                style="border-top: 1px solid;color: #dadada;margin-top: 0px;margin-bottom: 0px;"/>
            <div class="btn-group" style="line-height: 55px;">
                <span class="pull-left">状态：</span>
                <div class="hidden-lg-fusion" style="float: left">
                    <button type="button" class="btn btn-default state"
                            style="outline: none;margin-left: 20px;background-color: #49a6db;color:white"
                            value="SUCCESS">已订阅
                    </button>
                    <button type="button" class="btn btn-default state"
                            style="outline: none;background-color: transparent;margin-left: -3px;" value="APPLYING">申请中
                    </button>
                </div>
                <div class="hidden-md-fusion" style="float: left">
                    <button type="button" class="btn btn-default state"
                            style="outline: none;margin-left: 65px;background-color: #49a6db;color:white"
                            value="SUCCESS">已订阅
                    </button>
                    <button type="button" class="btn btn-default state"
                            style="outline: none;background-color: transparent;margin-left: -4px;" value="APPLYING">申请中
                    </button>
                </div>
            <#--<button type="button" class="btn btn-default state" style="margin-top: 10px;background-color: transparent;" value="FAILED">订阅失败</button>-->
            </div>
            <hr color="blue" width="100%"
                style="border-top: 1px solid;color: #dadada;margin-top: 0px;margin-bottom: 0px;"/>
            <div class="btn-group" style="line-height: 55px;">
                <span class="pull-left">排序：</span>
                <div class="hidden-md-fusion" style="float: left;vertical-align: middle;">
                    <button type="button" class="btn default order"
                            style="outline: none;width: 80px;border-radius: 8px;background-color: #49a6db;margin-left: 65px;color:white"
                            value="HOT">
                        热门<img src="${assetsPath}/img/demo/arrow-down-white.png" style="margin-left: 2px;"/></button>
                    <button type="button" class="btn default order"
                            style="outline: none;width: 80px;border-radius: 8px;background-color: transparent;margin-left: 20px;"
                            value="NEW">
                        最新<img src="${assetsPath}/img/demo/arrow-down.png" style="margin-left: 2px;"/></button>
                    <button type="button" class="btn default order"
                            style="outline: none;width: 80px;border-radius: 8px;background-color: transparent;margin-left: 20px;"
                            value="STAR">
                        星级<img src="${assetsPath}/img/demo/arrow-down.png" style="margin-left: 2px;"/></button>
                </div>
                <div class="hidden-lg-fusion" style="float: left;vertical-align: middle;">
                    <button type="button" class="btn default order"
                            style="outline: none;width: 80px;border-radius: 8px;background-color: #49a6db;margin-left: 20px;color:white"
                            value="HOT">
                        热门<img src="${assetsPath}/img/demo/arrow-down-white.png" style="margin-left: 2px;"/></button>
                    <button type="button" class="btn default order"
                            style="outline: none;width: 80px;border-radius: 8px;background-color: transparent;"
                            value="NEW">
                        最新<img src="${assetsPath}/img/demo/arrow-down.png" style="margin-left: 2px;"/></button>
                    <button type="button" class="btn default order"
                            style="outline: none;width: 80px;border-radius: 8px;background-color: transparent;"
                            value="STAR">
                        星级<img src="${assetsPath}/img/demo/arrow-down.png" style="margin-left: 2px;"/></button>
                </div>
            </div>
            <hr color="blue" width="100%"
                style="border-top: 1px solid;color: #dadada;margin-top: 0px;margin-bottom: 0px;"/>
            <div id="appList"></div>
        </div>
        <div class="col-md-0 col-lg-1"></div>
    </div>
    <!--footer-->
    <div class="row" style="margin-bottom: 25px;">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-12 hidden-lg-fusion">
            <@y.apphtmlCopyright4Short></@>
        </div>
        <div class="col-lg-10 hidden-md-fusion">
            <@y.apphtmlCopyright></@>
        </div>
        <div class="col-md-0 col-lg-1">
        </div>
    </div>
</body>
<style>
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        color: white;
        background-color: #31579c;
    }
</style>
<script>
    context.call([
        "core",
        "list",
        "jQuery",
        "starRating",
            "scanSelect"
    ], function (core, list, jQuery, starRating,scanSelect) {
        scanSelect.initSelect();
        $("#appList").load("/myApp/appList?state=SUCCESS&orderType=HOT");

        function search() {
            var classifyId = $("#roleSelect option:selected").val();
            var appName = $("#appSearch").val();
            location.href = "/app/classify?id=" + classifyId + "&appName=" + appName;
        }

        $('#searchBtn').click(function () {
            search();
        });

        $('#appSearch').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                search();
            }
        });
        $('.rating-input-small').rating({
            min: 0,
            max: 5,
            step: 1,
            size: 'xxs',
            // showClear:false
            displayOnly: true
        });

        String.prototype.endWith = function (str) {
            var reg = new RegExp(str + "$");
            return reg.test(this);
        }

        $('a').hover(function () {
            $(this).css("cursor", "pointer");
        });

        $('ul.users-list li').click(function () {
            location.href = "/app/detail?id=" + $(this).attr("appId");
        });

        $('tr.sumary').hover(function () {
            $(this).css("cursor", "pointer");
            var id = $(this).attr("id");
            if ("sumary" == $(this).attr("class")) {
                $("#" + id + "_detail").css('display', '');
                $("#" + id + "_detail").css("background-color", "#eeeeee");
            }
            $(this).css("font-size", "18px");
            $(this).css("font-weight", "bold");
            $(this).css("background-color", "#eeeeee");
        }, function () {
            $(this).css("cursor", "pointer");
            var _id = $(this).attr("id");
            $("#" + _id + "_detail").css("display", "none");
            $(this).css("font-size", "16px");
            $(this).css("font-weight", "");
            $(this).css("background-color", "transparent");
        });

        $('tr').click(function () {
            location.href = "/app/detail?id=" + $(this).attr("id");
        });

        $("#allTags").css("background-color", "#466eb7");
        $("#allTags").css("color", "white");

        $('.tag').click(function () {
            var _this = this;
            var id = $(_this).attr("id");
            var tagIds = new Array();
            if ($(_this).attr("_select") == 'true') {
                $(_this).attr("_select", 'false');
            } else {
                $(_this).attr("_select", 'true');
            }
            if ('rgb(231, 231, 231)' == $(this).css("background-color")) {
                $(this).css("background-color", "#466eb7");
                $(this).css("color", "white");
            } else {
                if ('allTags' != id) {
                    $(this).css("background-color", "rgb(231, 231, 231)");
                    $(this).css("color", "black");
                }
            }
            if ('allTags' == id) {
                //1,所有其他tag取消勾选
                $('.tag').each(function () {
                    if ($(this).attr("id") != id) {
                        $(this).attr("_select", "false");
                        $(this).css("background-color", "rgb(231, 231, 231)");
                        $(this).css("color", "black");
                    }
                });
            } else {
                //1，选中时，取消全选按钮
                if ($("#allTags").attr("_select") == 'true') {
                    $("#allTags").attr("_select", 'false');
                    $("#allTags").css("background-color", "rgb(231, 231, 231)");
                    $("#allTags").css("color", "black");
                }

                //3，查询其他Tag的ID
                $('.tag').each(function () {
                    if ($(this).attr("id") != 'allTags') {
                        var select = $(this).attr("_select");
                        if (select == 'true') {
                            tagIds.push($(this).attr("id"));
                        }
                    }
                });
            }

            if (tagIds.length == 0) {
                $("#allTags").css("background-color", "#466eb7");
                $("#allTags").css("color", "white");
                $("#allTags").attr("_select", 'true');
            }
            //查询排序按钮的值
            var orderType;
            $('.order').each(function () {
                if ('transparent' != $(this).css("background-color")) {
                    orderType = $(this).attr("value");
                }
            });

            var state;
            $('.state').each(function () {
                if ('transparent' != $(this).css("background-color")) {
                    state = $(this).attr("value");
                }
            });

            //请求后台数据
            $("#appList").load("/myApp/appList?orderType=" + orderType + "&tagIds=" + tagIds + "&state=" + state);

        });

        $('.info-box').hover(function () {
            $(this).css("background-color", "#c2c2c2");
            $(this).css("cursor", "pointer");
        }, function () {
            $(this).css("background-color", "transparent");
        });


        $('.order').click(function () {
            var tagIds = new Array();
            $('.tag').each(function () {
                if ($(this).attr("id") != 'allTags') {
                    var select = $(this).attr("_select");
                    if (select == 'true') {
                        tagIds.push($(this).attr("id"));
                    }
                }
            });
            var state;
            $('.state').each(function () {
                if ('rgba(0, 0, 0, 0)' != $(this).css("background-color")) {
                    state = $(this).attr("value");
                }
            });
            $("#appList").load("/myApp/appList?orderType=" + $(this).attr("value") + "&tagIds=" + tagIds + "&state=" + state);
            $('.order').each(function (index) {
                $(this).css("background-color", "transparent");
                $(this).css("color", "black");
                $(this).find("img").attr("src", "/assets/img/demo/arrow-down.png");
            });

            if ('transparent' == $(this).css("background-color") || 'rgba(0, 0, 0, 0)'==$(this).css("background-color")) {
                $(this).css("background-color", "#49a6db");
                $(this).css("color", "white");
                $(this).find("img").attr("src", "/assets/img/demo/arrow-down-white.png");
            } else {
                $(this).css("background-color", "transparent");
                $(this).css("color", "black");
                $(this).find("img").attr("src", "/assets/img/demo/arrow-down.png");
            }
        });

        $('.state').click(function () {
            var tagIds = new Array();
            $('.tag').each(function () {
                if ($(this).attr("id") != 'allTags') {
                    var select = $(this).attr("_select");
                    if (select == 'true') {
                        tagIds.push($(this).attr("id"));
                    }
                }
            });
            var orderType;
            $('.order').each(function () {
                if ('transparent' != $(this).css("background-color")) {
                    orderType = $(this).attr("value");
                }
            });
            $("#appList").load("/myApp/appList?orderType=" + orderType + "&tagIds=" + tagIds + "&state=" + $(this).attr("value"));
            $('.state').each(function (index) {
                $(this).css("background-color", "transparent");
                $(this).css("color", "black");
            });

            if ('transparent' == $(this).css("background-color") || 'rgba(0, 0, 0, 0)'==$(this).css("background-color")) {
                $(this).css("background-color", "#49a6db");
                $(this).css("color", "white");
            } else {
                $(this).css("background-color", "transparent");
                $(this).css("color", "black");
            }
        });

        $('.users-list.hot').find('li').each(function () {
            $(this).hover(function () {
                $(this).css("background-color", "#eeeeee");
                $(this).css("cursor", "pointer");
            }, function () {
                $(this).css("background-color", "transparent");
            });
        });

        $('.users-list.common').find('li').each(function () {
            $(this).hover(function () {
                var id = $(this).attr("id");
                $(this).css("cursor", "pointer");
                if ("sumary" == $(this).attr("class")) {
                    $("#" + id).css("display", "none");
                    $("#" + id + "_detail").css("display", "block");
                }
            }, function () {
                var _id = $(this).attr("id");
                $(this).css("cursor", "pointer");
                if (_id.endWith("_detail")) {
                    var id = _id.substring(0, _id.length - 7);
                    $("#" + id + "_detail").css("display", "none");
                    $("#" + id).css("display", "block");
                }
            });
        });

        $('.nav').find('li').find("a").each(function () {
            $(this).hover(function () {
                $(this).css("cursor", "pointer");
                $(this).css("color", "white");
            }, function () {
                $(this).css("color", "white");
            });
        });
    });
</script>
</html>
</#escape>